import 'package:app/common/user_helper.dart';
import 'package:app/router/index.dart';
import 'package:app/store/index.dart';
import 'package:app/theme/design_tokens.dart';
import 'package:creato_ui/creato_ui.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class UserPage extends StatelessWidget {
  UserPage({super.key});

  final CreatoListTileTheme theme =
      CreatoListTileTheme(titleTextFontWeight: FontWeight.normal);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: LayoutBuilder(builder: (context, constraints) {
          return SingleChildScrollView(
            child: Container(
              decoration: const BoxDecoration(color: Color(0xFFF6F8FC)),
              constraints: BoxConstraints(
                  minHeight: constraints
                      .maxHeight), // 利用LayoutBuilder得到body的最大宽度，因为滚动，所以设置最小高度撑满屏幕，为body的最大高度
              child: Column(
                children: [
                  Stack(
                    children: [
                      SizedBox(
                        width: MediaQuery.of(context).size.width,
                        child: Image.asset(
                          'assets/images/user_bg.png',
                          fit: BoxFit.cover,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(
                            top: 87, left: 20.5, right: 20.5),
                        child: Column(
                          children: [
                            _buildUserInfo(),
                            const SizedBox(
                              height: 32,
                            ),
                            _buildProjectNoteVIP(),
                            const SizedBox(
                              height: 12,
                            ),
                            _buildProjectAndFile(),
                            const SizedBox(
                              height: 12,
                            ),
                            _buildOtherOperationMenu()
                          ],
                        ),
                      )
                    ],
                  ),
                ],
              ),
            ),
          );
        }));
  }

  Drawer _buildDrawer(BuildContext context) {
    return Drawer(
        child: ListView(padding: EdgeInsets.zero, children: [
      const DrawerHeader(
        child: CircleAvatar(),
      ),
      ListTile(
        leading: const Icon(Icons.color_lens),
        title: Text('主题模式'),
        onTap: () {
          router.push("/theme_setting");
        },
      ),
      ListTile(
        leading: const Icon(Icons.people),
        title: Text("用户信息"),
        onTap: () {},
      ),
      ListTile(
        leading: const Icon(Icons.logout),
        title: Text("退出登录"),
        onTap: () {
          UserHelper.loginOut(context);
        },
      ),
    ]));
  }

  // 用户信息
  Widget _buildUserInfo() {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        router.push("/home/user_info");
      },
      child: Row(
        children: [
          _buildAvatarItem(),
          const SizedBox(
            width: 12,
          ),
          Consumer<UserModel>(
            builder: (context, model, child) {
              return Expanded(
                  child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 姓名&职位
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      ConstrainedBox(
                        constraints: const BoxConstraints(maxWidth: 125),
                        child: Text(
                          model.userInfo?.name ?? "",
                          textAlign: TextAlign.left,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                              color: Colors.black,
                              fontSize: 21,
                              fontWeight: FontWeight.w600),
                        ),
                      ),
                      const SizedBox(
                        width: 8,
                      ),
                      if (model.userInfo?.position != null)
                        Expanded(
                            child: DecoratedBox(
                          decoration: const BoxDecoration(
                              color: Color(0xFFB4C7DF),
                              borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(14),
                                  topRight: Radius.circular(12),
                                  bottomRight: Radius.circular(12))),
                          child: Padding(
                            padding: const EdgeInsets.only(
                              top: 2,
                              bottom: 3,
                              right: 7,
                              left: 7,
                            ),
                            child: Text(
                              overflow: TextOverflow.ellipsis,
                              model.userInfo?.position ?? "",
                              style: const TextStyle(
                                fontSize: 11,
                                color: Colors.white,
                              ),
                            ),
                          ),
                        )),
                    ],
                  ),
                  // 公司
                  Text(
                    model.userInfo?.enterprise ?? "公司名称未设置",
                    style: const TextStyle(color: Color(0xFF747474)),
                    textAlign: TextAlign.left,
                    overflow: TextOverflow.ellipsis,
                  )
                ],
              ));
            },
          )
        ],
      ),
    );
  }

  // 项目笔记会员
  Widget _buildProjectNoteVIP() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(horizontal: 19, vertical: 17),
      decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(
            Radius.circular(DesignTokens.radius1),
          ),
          gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [
                Color(0xFFD0FE91),
                Color(0xFF71FED3),
              ])),
      child: const Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
              child: Align(
            alignment: Alignment.centerLeft,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "项目笔记会员 VIP",
                    textAlign: TextAlign.left,
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                  ),
                ),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "项目不限，功能不限",
                    style: TextStyle(fontSize: 12, color: Color(0xFF41793C)),
                  ),
                )
              ],
            ),
          )),
          CreatoButton(text: "去开通")
        ],
      ),
    );
  }

  // 项目&文件库
  Widget _buildProjectAndFile() {
    return Container(
      decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(DesignTokens.radius1)),
          color: Colors.white),
      padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
      child: Row(
        children: [
          _buildProjectAndFileItem(
              "我的项目", "我的信息", "assets/images/user_icon_xiangmu.png", () {
            router.push("/home/project");
          }),
          const Padding(
            padding: EdgeInsets.only(left: 7, right: 28),
            child: CreatoDivider(
              dividerType: CreatoDividerType.vertical,
              verticalHeight: 30,
              size: 1,
            ),
          ),
          _buildProjectAndFileItem(
              "文件库", "文档管理", "assets/images/user_icon_file.png", null),
        ],
      ),
    );
  }

  Widget _buildProjectAndFileItem(
      String title, String subTitle, String icon, void Function()? onTap) {
    return Expanded(
        child: InkWell(
      onTap: onTap,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                textAlign: TextAlign.left,
                style: const TextStyle(
                    color: Color(0xFF171A1D),
                    fontSize: 15,
                    fontWeight: FontWeight.w600),
              ),
              Text(
                subTitle,
                textAlign: TextAlign.left,
                style: const TextStyle(
                  color: Color(0xFF999999),
                  fontSize: 11,
                ),
              )
            ],
          ),
          Image.asset(
            icon,
          ),
        ],
      ),
    ));
  }

  // 其他操作菜单
  Widget _buildOtherOperationMenu() {
    return Container(
      decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(DesignTokens.radius1)),
          color: Colors.white),
      padding: const EdgeInsets.all(8),
      child: Column(
        children: [
          _buildOtherOperationMenuItem(
              "assets/images/user_icon_order.png", "订单与开票", true),
          _buildOtherOperationMenuItem(
              "assets/images/user_icon_invite.png", "邀请有礼", true),
          _buildOtherOperationMenuItem(
              "assets/images/user_icon_help.png", "帮助中心", true),
          _buildOtherOperationMenuItem(
              "assets/images/user_icon_safe.png", "安全声明", true),
          _buildOtherOperationMenuItem(
              "assets/images/user_icon_feedback.png", "使用反馈", false),
        ],
      ),
    );
  }

  Widget _buildOtherOperationMenuItem(
    String icon,
    String title,
    bool isShowLine,
  ) {
    return Row(
      children: [
        Image.asset(
          icon,
          width: 27,
        ),
        const SizedBox(
          width: 8,
        ),
        Expanded(
            child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(right: 5),
              child: CreatoRightListTile(
                theme: theme,
                title: Text(title),
              ),
            ),
            if (isShowLine) CreatoDivider(),
          ],
        ))
      ],
    );
  }

  Widget _buildAvatarItem() {
    return CircleAvatar(
      foregroundImage: Image.network(
              "https://q5.itc.cn/q_70/images03/20240406/2c8f1d2cd13e4d4392fa07ccaab1f219.jpeg")
          .image,
      maxRadius: 40,
    );
  }
}
